import React, { Component } from 'react';
import {View, ScrollView, Image, Text, Navigator} from '@tarojs/components'
import {gotoPage} from '../../utils/tools'
import RightArrow from '../../components/icon/right-arrow'
import {RESOURCE_URL} from '../../constants/api'
import './swiper-movie.scss'

interface Type {
  title: string
  data: []
  clickMore: any
  showBg: boolean
  showLabel: boolean
  showMore?: boolean
}

export default class SwiperMovie extends Component<Type> {
  static defaultProps = {
    title: '推荐',
    data: [],
    clickMore: () => {
    },
    showBg: false,
    showLabel: false,
    showMore: true
  }

  goto(value) {
    gotoPage(value.url)
  }

  more() {
    this.props.clickMore()
  }

  render() {
    return (
      <View className='swiperMovieRoot' style={this.props.showBg ? `background: white;` : ''}>
        <View className='title-box'>
          <View className='title'>{this.props.title}</View>
          {this.props.showMore && <View className='more' onClick={this.more.bind(this)}>
            <Text>更多</Text>
            <View className='icon'><RightArrow /></View>
          </View>}
        </View>
        <View className='content-box'>
          {this.props.data.length > 0 &&
          <ScrollView scrollX enable-flex className='subNav'>
            <View className='hot-list'>
              {this.props.data.map((item, index) =>
                <Navigator className='hot-item' hoverClass='none' key={index}
                  url={"/movie/Minfo?id=" + item.std_id}
                >
                  <View className='img-box'>
                    <Image className='hot-img' src={RESOURCE_URL + item.poster} mode='aspectFill' />
                    <View className='grade'>评分：{item.grade}</View>
                  </View>
                  <View className='hot-text'>{item.name}</View>
                  <View className='hot-type'>{item.movie_type}</View>
                </Navigator>
              )}
            </View>
          </ScrollView>
          }
        </View>
      </View>
    )
  }
}
